<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../lib/jquery-1.11.1.min.js"></script>
<style>
	*{
		margin: 0;
		padding: 0;
	}
body {
	text-align: center;
	background-color: rgba(1, 63, 75, 0.95);
}

.div {

	margin: 0 auto;
}

#content {
	width: 90%;
	margin: 10px auto;
}

#uploadFile {
	margin: 100px auto;
}
	#translate{
		float: left;
	}
	.fanyi_xuan{
		overflow: hidden;
		width: 90%;
		margin: 0 auto;
		margin-top: 80px;
	}
	.fanyi_xuan>div{
		float: left;
		margin-right: 40px;
		color: white;
	}

</style>
</head>
<body>
	<div>
		<form id="uploadFile" enctype="multipart/form-data">
			<span style="color: white">Summarization ratio：</span>
			<select id="uploadFileRatio">
				<option value="10">10%</option>
				<option value="20">20%</option>
				<option value="30">30%</option>
				<option value="40">40%</option>
				<option value="50">50%</option>
				<option value="60">60%</option>
			</select>
			<input type="file" name="files" style="display: none;" onchange="javascript:$('input[name=\'fileName\']').val(this.files[0].name);" />
			<input name="fileName" value="No files selected" readonly /> 
			<input type="button" value="Select File" onclick="javascript:$('input[name=\'files\']').click();" /> 
			<input type="button" id="submit" value=" Submit" />
		</form>
		<input value="Enter url please" id="uri"/> 
		<input type="button" id="htmlSubmit" value="GET SUMMARY" />
	</div>
	<div class="fanyi_xuan">
		<div>
			<span>Source language:</span>
			<select id="yuanyuyan">
				<option value="nzh">Chinese</option>
				<option value="nen">English</option>
			</select>
		</div>
		<div>
			<span>Translate to：</span>
			<select id="fanyi">
				<option value="nen">English</option>
				<option value="nzh">Chinese</option>
			</select>
		</div>
		<button id="translate">translate</button>

	</div>
	<div>
		<textarea rows="20" cols="190" id="content"></textarea>
	</div>
</body>
<script>
	var yuanyuyan='nzh';
	var fanyi='nen';
	$('#yuanyuyan').change(function () {
		yuanyuyan=$(this).val();
	});
	$('#fanyi').change(function () {
		fanyi=$(this).val();
	});
	$('#translate').click(function () {
		var content=$('#content').text();
		var ajax_data={"srcLanguage":yuanyuyan,"targetLanguage":fanyi,"content":content};

		$.ajax({
			type: 'post',
			url: 'http://43.240.136.162:8080/yeesight/api/translate/trans',
			contentType: "application/json",
			data:JSON.stringify({
				message:ajax_data
			}),
			success: function(res) {
				$('#content').text(res.data)
			},error:function (err) {

			}
		});
	})
	$("#submit").on("click", function() {
		
		$("#content").text("Analyzing the article for a summary......");
		var formData = new FormData($("#uploadFile")[0]);
		var ratio = $("#uploadFileRatio").val();
		if(!ratio) {
			ratio = 10;
		}
		console.log(ratio);
		formData.append("ratio",ratio);
        //formData.append("file",$("#upload")[0].files[0]);
        
		$.ajax({
			type : "POST",
			contentType : false,
			processData : false,
			url : "/nlp/controller/uploadFile",
			dataType: "json",
			data : formData,
			async : true,
			cache : false,
			error : function(request) {
				$("#content").text("");
				alert("there was an error");
			},
			success : function(data) {
				$("#content").text("");
				//jsonData = $.parseJSON(data);
				if (data.data) {
					$("#content").text(data.data.result);
				} else {
					alert(data.message);
				}
			}
		});

	});
	
	
	$("#htmlSubmit").on("click", function() {
		var uri = $("#uri").val();
		var content;
		if(uri!="uri"){
			$("#content").text("Analyzing the article for a summary......");
		}
		$.ajax({
			type : "get",
			url : "/nlp/controller/htmlSummary?uri="+uri,
			dataType: 'json',
			contentType : 'application/json;charset=utf-8',
			async : true,
			cache : false,
			error : function(request) {
				$("#content").text("");
				alert("there was an error");
			},
			success : function(data) {
				$("#content").text("");
				var content;
				 for (var key in data) {
					if(!content){
						content = key + "\r\n";
					}else{
						content = content + "\r\n" + key + "\r\n";
					}
					summaryData = data[key];
					var res;
					for (var key in summaryData) {
						summary = $.parseJSON(summaryData[key]);
						if(!summary.data){
							res = summary.message;
						}else{
							res = summary.data.result;
						}
						content = content  + "\r\n"  + key  + ":\r\n"  + res  + "\r\n" ;
					}
				} 
				 /* content = content.replace(/< BR\/>/g,"\r\n"); */
				$("#content").text(content);
			}
		});

	});
</script>
</html>